<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户信息管理</title>
  <!--    引入 bootstrap的 css-->
  <link type="text/css" rel="stylesheet" th:href="@{plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css}">
  <!--   引入 jquery 框架，需要第一个引入，因为其他的js会使用该框架-->
  <script type="text/javascript" th:src="@{plugins/jquery-1.12.4/jquery-1.12.4.min.js}"></script>
  <!--    引入 bootstrap的js-->
  <script type="text/javascript" th:src="@{plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js}"></script>

  <script type="text/javascript">
    // 使用ajax进行查询操作
    function doAjaxQuery() {
      $.ajax({
        type: "POST", // 请求的类型  等价于 form 表单的 method 属性
        url: "doAjaxQuery", // 请求的服务器的url，等价于form表单的 action 属性
        data: $("#queryForm").serialize(),//"userName="+$("#username")+"&userpsw="+$("#userpsw"), // 发送服务器的表单数据  form表单数据
        success: function (data) { // 成功时候的回调函数
          // 进行业务逻辑处理，进行 dom 操作，完成页面的据图更新
          console.log("data:::::")
          console.log(data)
          $("#showMsg").html(JSON.stringify(data)); // 局部刷新
        },
        error: function () {
          alert("出现错误");
        }
      });
    }

  </script>
</head>
<body>

<div class="ibox-content">
  <form id="queryForm" class="form-horizontal" style="padding-top: 20px;">
    <div class="form-group">
      <label class="col-sm-2 control-label">用户名：</label>
      <div class="col-sm-3">
        <input type="text" id="username" name="username" placeholder="请输入用户名" class="form-control"> <span
              class="help-block m-b-none"></span>
      </div>

      <label class="col-sm-2 control-label">联系电话：</label>
      <div class="col-sm-3">
        <input type="text" id="usertel" name="usertel" placeholder="请输入联系电话" class="form-control"> <span
              class="help-block m-b-none"></span>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-2 control-label">地址：</label>
      <div class="col-sm-3">
        <input type="text" id="useraddress" name="useraddress" placeholder="密码" class="form-control">
      </div>

      <label class="col-sm-2 control-label">注册日期：</label>
      <div class="col-sm-3">
        <div class="col-sm-5">
          <input type="date" placeholder="请输入开始日期" class="form-control">
        </div>
        <div class="col-sm-2">
          -
        </div>
        <div class="col-sm-5">
          <input type="date" placeholder="请输入结束日期" class="form-control">
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-3 col-sm-2">
        <button class="btn btn-sm btn-white" type="button" onclick="doAjaxQuery()">查询</button>
      </div>
    </div>

  </form>
</div>

<div>
  <span id="showMsg"></span>
</div>


</body>
</html>
</body>
</html>